
$scroll_2_w: 140rpx;

.none {
    display: none;
}

.divider {
    position: absolute;
    width: 80%;
    bottom: 4rpx;

}


.sibling-bottom {
    border-radius: 0 20rpx 0 0;
    background-color: #f0f0f0;
    /* border-radius: 50%; */
}

.sibling-top {
    border-radius: 0 0 20rpx 0;
    background-color: #f0f0f0;
    /* border-radius: 50%; */
}

.scroll-1 {
    width: $scroll_2_w;
    /* margin-bottom: 20px; */
    /* background-color: #f0f0f0; */
    background-color: #f1f1f1;
    height: 100vh;
}

.scroll-2 {
    width: 100%;
    /* background-color: #f0f0f0; */
    /* margin-bottom: 20rpx; */
    padding: 0 20rpx;
    /* padding-right: 100rpx; */
}

.scroll {
    /* height: 100%; */

    height: calc(100vh - 130rpx);
    /* height: calc(100vh - 650rpx); */
}

.main-scroll-container {
    display: flex;
    flex-direction: row;
    width: 100vw;
    justify-content: flex-start;
    height: 0;
}

.main-scroll-mask {


    height: calc(100vh - 130rpx);
    width: calc(100vw - $scroll_2_w);
    display: none;

}

.x-layout {
    display: flex;
    flex-direction: row;

    .x-pad {
        width: $scroll_2_w;
        // height: 100vh;
    }

    .bottom-x {
        // left: $scroll_2_w;
        // width: calc(100vw - $scroll_2_w);
        // position: relative;

        // height: calc(100vh - 130rpx);
        flex: 1;
        padding: 0 20rpx;
    }
}



.unit {

    background-color: #fff;
    width: 100%;
}

.t-unit-wrapper {
    /* height: 100rpx; */
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: center; */

    padding-top: 20rpx;
}

.round {
    width: 16rpx;
    height: 34rpx;
    background: #ed680e;
    /* border-radius: 50%; */
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
    margin-right: 14rpx;
}

.t-unit {


    font-size: 30rpx;
    font-weight: bold;
    color: #606060;

}

.item-wrapper {
    display: flex;
    flex-direction: column;
}

.item {
    display: flex;
    gap: 4rpx;

    flex-direction: column;
    // width: 100%;
}

.item-left {
    border-radius: 20rpx;
    overflow: hidden;
    width: 100%;
    height: 280rpx;//
}

.item-left-2 {
    border-radius: 20rpx;
    overflow: hidden;
    width: 100%;
    height: 720rpx;//
}

.product-banner{
    border-radius: 20rpx;
    overflow: hidden;
    width: 100%;
    height: 720rpx;
}
.aspect-ratio-1-2 {
    aspect-ratio: 2 / 1;
}

.aspect-ratio-3-4 {
    aspect-ratio: 3 / 4;
    // height: 800rpx;
}



.item-right {

    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

.item-right-text {
    font-size: 22rpx;
}

.menu-item {


    /* width: 100%; */

    height: 100%;
    word-wrap: break-word;
    word-break: break-all;
    font-size: 24rpx;
    color: rgb(102, 102, 102);

    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    position: relative;
}

.active-menu-item {
    background-color: #fff;
    color: #ed680e;

    font-weight: bold;
    border-radius: 20rpx 0 0 20rpx;
}

.menu-item-wrapper {
    background-color: #f0f0f0;
    height: 180rpx;
    width: $scroll_2_w;
    /* padding: 20rpx; */
}

.sibling-top-wrapper {
    background-color: #fff;
}

.sibling-bottom-wrapper {
    background-color: #fff;
}

.active-menu-item-wrapper {
    background-color: #f0f0f0;
}

.menu-title {
    padding:0 20rpx;
    box-sizing: border-box;
}
.padding-top-20{
    padding-top: 20rpx;
}
.margin-top-20{
    margin-top: 20rpx;
}
.menu-icon {

    width: 76rpx;
    height: 76rpx;
    overflow: hidden;
}

.active-menu-icon {
    background-color: #fff;
}

.cover {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
}

.menu {
    display: flex;
    flex-direction: row;

}

.gap {
    width: 30rpx;
}

.tools {
    display: flex;
    flex-direction: row;
    padding: 20rpx 0;
    justify-content: space-between;
    width: 100vw;
}

.share-btn::after {
    border: 0rpx solid #fff;
}

.share-btn {
    padding: 0rpx;
}